import React, {Component} from 'react';
import './index.css';
import {InputNumber, Slider, Radio, Select, TreeSelect} from 'antd';
import BaseOpts from '../BaseOpts';
import Ajax from '../../common/ajax';
import SlideInput from '../../common/SlideInput/index';

const RadioGroup = Radio.Group;
const TreeNode = TreeSelect.TreeNode;

class GoodsListOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {}
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
            blockList: [],
            catList: [],
        };
    }

    render() {
        var {data, blockList, catList} = this.state;
        var {style, dataset, layout, isPage = '0', showNum = 10} = data;
        var {block, ty = 1} = dataset;
        var curBlockId = block ? (block.id || block.category_id) : '';
        var marginTop = parseFloat(style.marginTop || 0);
        var marginBottom = parseFloat(style.marginBottom || 0);

        return (
            <div className="optsPanel">
                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">连接到</label>
                    <div className="optsPanel__item__bd">
                        <TreeSelect
                            style={{width: 200}}
                            value={curBlockId ? curBlockId + '_' + ty : ''}
                            dropdownStyle={{maxHeight: 400, overflow: 'auto'}}
                            placeholder="请选择"
                            allowClear
                            treeDefaultExpandAll
                            onChange={(v) => {
                                var arr = v.split('_');

                                this._selectBlock(arr[0], arr[1] || 1);
                            }}
                        >
                            <TreeNode value="0" title="商品/素材块" key="0-1" disabled={true}>
                                {
                                    blockList.map(function (block) {
                                        return (
                                            <TreeNode
                                                value={block.id + '_1'}
                                                title={block.title}
                                                key={'0-1-' + block.id}
                                            ></TreeNode>
                                        )
                                    })
                                }
                            </TreeNode>
                            <TreeNode value="1" title="商品分类" key="0-2" disabled={true}>
                                {
                                    catList.map(function (item) {
                                        return (
                                            <TreeNode
                                                value={item.category_id + '_2'}
                                                title={item.name}
                                                key={'0-2-' + item.category_id}
                                            >
                                                {
                                                    item.sub_category ?
                                                        item.sub_category.map(function (item) {
                                                            return (
                                                                <TreeNode
                                                                    value={item.category_id + '_2'}
                                                                    title={item.name}
                                                                    key={'0-2-' + item.category_id}
                                                                >
                                                                </TreeNode>
                                                            )
                                                        })
                                                        : null
                                                }
                                            </TreeNode>
                                        )
                                    })
                                }
                            </TreeNode>
                        </TreeSelect>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">商品布局</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup onChange={(e) => {
                            this.$dataChange('layout', e.target.value, false);
                        }} value={layout}>
                            <Radio value={''}>双列</Radio>
                            <Radio value={'single'}>单列</Radio>
                        </RadioGroup>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">分页加载</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup onChange={(e) => {
                            this.$dataChange('isPage', e.target.value, false);
                        }} value={isPage}>
                            <Radio value={'0'}>不需要</Radio>
                            <Radio value={'1'}>需要</Radio>
                        </RadioGroup>
                    </div>
                </div>
                {
                    isPage == '0' ?
                        <div className="optsPanel__item">
                            <label className="optsPanel__item__hd">展示个数</label>
                            <div className="optsPanel__item__bd">
                                <RadioGroup onChange={(e) => {
                                    this.$dataChange('showNum', e.target.value, false);
                                }} value={showNum}>
                                    <Radio value={4}>4个</Radio>
                                    <Radio value={8}>8个</Radio>
                                    <Radio value={10}>10个</Radio>
                                    <Radio value={16}>16个</Radio>
                                </RadioGroup>
                            </div>
                        </div>
                        : null
                }

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} value={marginTop} onChange={(val) => {
                            this.$dataChange('marginTop', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <SlideInput step={1} min={0} value={marginBottom} onChange={(val) => {
                            this.$dataChange('marginBottom', val + 'px', 'style');
                        }}/>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <div className="optsPanel__item__bd">
                        <a href="/admin/GoodsModule/listPage?show_type=1" target="_blank"
                           className="ant-btn-dataMng ant-btn ant-btn-primary ant-btn-lg">数据管理</a>
                    </div>
                </div>
            </div>
        );
    }

    componentDidMount() {
        this._getGoodsBlocks();
        this._getCatList();
    }

    //获取模块列表
    _getGoodsBlocks() {
        var _self = this;

        Ajax.G('/openapi/CHome/getDataBlock', {
            type: 0
        }, function (res) {
            var result = res['result'];

            _self.setState({
                blockList: result.dataBlock
            });
        });
    }

    //获取分类列表
    _getCatList() {
        var _self = this;

        Ajax.G('/api/Category/getCategory', {
            type: 0
        }, function (res) {
            var result = res['result'];

            _self.setState({
                catList: result.catList
            });
        });
    }

    /**
     * 获取商品列表
     * @param blockId
     * @param ty 1.商品块2.分类
     * @private
     */
    _selectBlock(blockId, ty) {
        var _self = this;
        var {blockList, catList} = this.state;
        var block;

        if (ty == 1) {
            blockList.some(function (b) {
                if (b.id == blockId) {
                    block = b;
                    return true;
                }
            });
        } else {
            catList.some(function (b) {
                if (b.category_id == blockId) {
                    block = b;
                    return true;
                }
                return b.sub_category.some(function (b) {
                    if (b.category_id == blockId) {
                        block = b;
                        return true;
                    }
                })
            });
        }
        _self.$dataChange(['block', 'ty'], [block, ty], 'dataset');
    }
}

export default GoodsListOpts;
